The :not() pseudo-class in CSS allows you to select elements that do not match a particular selector. It is useful for excluding specific elements from a group while applying styles to others.

How :not() Works

1
Use :not(selector) to exclude elements matching the given selector from being styled.
2
It can be combined with other selectors to create more precise rules.
3
:not() can take simple selectors like class, ID, or element type. In modern CSS, it can also accept complex selectors.

Example: Using :not()

In this example, the first and third list items are styled, while the second item with class 'exclude' is ignored. Similarly, the 'Submit' button is styled but the 'Cancel' button is excluded.

Best Practices

1
Use :not() to simplify CSS and avoid adding extra classes for exclusions.
2
Combine :not() with other pseudo-classes (like :hover) for more dynamic styling.
3
Keep selectors simple for readability and performance.
4
Test complex :not() rules across browsers to ensure consistency.

Difficulty: 3/10

Topics: CSS selectors, pseudo-classes, negation logic

Scenario Questions

0-2 years experience

1
You're asked to style all paragraphs except the ones with a class of 'intro'. How would you write that CSS rule?
2
If you write .button:not(.disabled) { color: blue; }, what happens to a button that has both class 'button' and 'disabled'?
3
You have a list of items and want to apply a margin to all except the first one. How would you use :not() to do that?

2-5 years experience

1
A designer says all cards should have a border except those inside a modal — but the border is still showing on modal cards. What could be wrong with the CSS rule using :not()?
2
You're building a component library where a base button style applies to all buttons except those with data-variant='ghost'. Someone reports that the ghost variant still gets the base styles in some browsers. What might be the issue?
3
A team member used :not(.hidden) to hide elements with display: none, but it's not working as expected. Why might that be, and what’s a better approach?

5-8 years experience

1
You're optimizing a large-scale UI with 10k+ elements and using :not() extensively to avoid class bloat. How would you evaluate the performance impact, and when would you consider replacing it with explicit class-based styling?
2
Your CSS architecture uses :not() to exclude components from global styles, but it's causing specificity wars in legacy code. How would you refactor this to improve maintainability without breaking existing styles?
3
A component uses :not(:first-child) to add top margins, but it breaks when dynamically rendered content changes the DOM order. How would you design a more robust solution that doesn't rely on positional pseudo-classes?

8+ years experience

1
You're leading a migration from a legacy CSS framework that uses inline classes for exclusion to a modern utility-first system. How would you architect a transition plan that minimizes regressions when replacing :not() patterns with explicit utility classes?
2
Your company's design system uses :not() extensively for conditional styling across 50+ micro-frontends. How do you ensure consistency and avoid performance degradation as the number of selectors grows, and when would you enforce a ban on :not() in favor of semantic class naming?
3
A cross-team component library relies on :not() to override global styles without requiring consumers to add exclusion classes. This creates hidden coupling. How would you redesign the API to make the contract explicit and reduce technical debt over time?

Follow-up Questions

❓Can you use :not() with multiple selectors inside it?
❓What happens if you pass an invalid selector to :not()?
❓How does :not() affect specificity compared to regular selectors?